<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {copyHandler} from "@/utils/util.js";
import {showToast} from "vant";
import type {UploaderFileListItem} from 'vant';
import uploadImage from "@/utils/uploadImage";
import {spInfo, submitApply} from "@/common/api/infoSubmit";

import 'element-plus/dist/index.css'
import {ElUpload} from 'element-plus';

//类型
let accRole = ref(-1);//-1普通用户,0-共建社区,1-B类,2-A类

//商家
let resultShangJia = reactive({
  "start_date": "",
  "end_date": "",
  "rmb": 0,
  "price": 0
});
//驿站
let resultYiZhan = reactive({
  "start_date": "",
  "end_date": "",
  "rmb": 0,
  "price": 0
});


//驿站(金牌商家/未开业招商中心)
let yiZhanShangJiaNo = reactive({
  "start_date": "",
  "end_date": "",
  "rmb": 0,
  "price": 0
});

//驿站(皇冠商家/已开业招商中心)
let yiZhanShangJiaYes = reactive({
  "start_date": "",
  "end_date": "",
  "rmb": 0,
  "price": 0
});
//商家(皇冠商家/已开业招商中心)
let ShangJiaYes = reactive({
  "start_date": "",
  "end_date": "",
  "rmb": 0,
  "price": 0
});


//银行信息
let bankCardInfo = reactive([
    {
  "bankAddress": "",
  "bankName": "",
  "bankNo": "",
}
]);

////获取信息
const getKpInfo = async () => {
  try {
    const res = await spInfo({});
    accRole.value = res.result.role;
    Object.assign(bankCardInfo, res.result['bankCardInfo2']);
    Object.assign(resultShangJia, res.result['商家']);
    Object.assign(resultYiZhan, res.result['驿站']);
    Object.assign(yiZhanShangJiaNo, res.result['驿站(金牌商家/未开业招商中心)']);
    Object.assign(yiZhanShangJiaYes, res.result['驿站(皇冠商家/已开业招商中心)']);
    Object.assign(ShangJiaYes, res.result['商家(皇冠商家/已开业招商中心)']);
    // console.log(accRole);


  } catch {
    /** empty */
  }
};
getKpInfo();


const form = reactive({
  xingming: "",
  mobile: "",
});


const checked = ref(1);


///账户类型的显示
const typeText = (role: number) => {
  switch (role) {
    case -1:
      return "普通用户";
    case 0:
      return "共建社区";
    case 1:
      return "B类招商社区";
    case 2:
      return "A类招商社区";
  }
}
//对应的权益
const typeEquity = (role: number) => {
  switch (role) {
    case -1:
      return "无";
    case 0:
      return "共建社区 权益";
    case 1:
      return "树拍驿站或商家 权益";
    case 2:
      return "树拍驿站或商家 权益";
  }
}


//表单
const onSubmit = async () => {
  // console.log(accRole.value);
  // if (accRole.value == -1 && [1, 2].includes(checked.value)) {
  //   console.log(accRole);
  //   showToast("您当前为普通用户，暂不支持");
  //   return;
  // }
  // if (accRole.value == 0 && checked.value == 2) {
  //   showToast("您当前为共建社区，暂不支持商家权益");
  //   return;
  // }
  //判断imageUrl是否为空
  if (imageUrl.value == "") {
    showToast("请上传打款凭证");
    return;
  }
  try {
    const res = await submitApply({
      role: checked.value,
      images: imageUrl.value,
    });
    console.log(res);
    if (res.status == 0) {
      showToast(res.message ?? '提交成功');
    }
  } catch {
    /** empty */
  }


};

// 文本复制
const copyText = (text: string) => {
  const {errMsg} = copyHandler({data: text});
  if (errMsg.indexOf('ok') > -1) {
    showToast('复制成功');
  }
  console.log(errMsg);
};

// 校验没通过
// const onFailed = ({ errors }) => {
//   const msg = errors[0]?.message;
//   msg && showToast(errors[0].message);
// };


const props = withDefaults(
    defineProps<{
      modelValue: string;
      maxCount?: number;
      fileType?: string[];
      label: string;
      name: string;
    }>(),
    {
      modelValue: '',
      maxCount: 1,
      fileType: () => ['image/jpeg', 'image/png', 'image/jpg'],
      label: '',
      name: '',
    }
);

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

//上传图的链接
const imageUrl = ref("");

///上传前的判断
const handleBeforeUpload = async (file: any) => {
  if (!props.fileType.includes(file.type)) {
    showToast('请上传图片文件');
    return false;
  }
  if (file.size > 4 * 1024 * 1024) {
    showToast('文件大小不能超过 4M');
    return false;
  }
  try {
    const res = await uploadImage(file);
    console.log("卧槽上传成功了=" + res?.data.url);
    imageUrl.value = res?.data.url ?? "";
  } catch (err) {
    console.error(err);
  }


  // // 获取文件地址
  // const fileReader = new FileReader();
  // fileReader.onload = () => {
  //   const imageUrl = fileReader.result;
  //   // 在这里可以将 imageUrl 上传到服务器
  //   console.log('图片地址:', imageUrl);
  // };
  // fileReader.readAsDataURL(file.raw);
  // 返回 false 阻止 Element Plus 组件的默认上传行为
  return false;
};


</script>
<template>
  <div class="infoSubmit">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-cell
            clickable
            style="margin-top: 10px; font-weight: bold"
            title="极速版用户-树拍权益:"
            :border="false"/>
<!--        <van-cell title="该账户为" :value="typeText(accRole)"/>-->
<!--        <van-cell title="可以享受" :value="typeEquity(accRole)"/>-->

        <van-cell title="树拍驿站" :label="`￥${resultYiZhan.rmb} + ${resultYiZhan.price}GHB`">
          <template #right-icon><input type="radio" v-model="checked" value="1"></template>
        </van-cell>
        <van-cell title="商家" :label="`￥${resultShangJia.rmb} + ${resultShangJia.price}GHB`">
          <template #right-icon><input type="radio" v-model="checked" value="2"></template>
        </van-cell>

<!--        <van-cell-->
<!--            style="margin-top: 10px;  font-weight: bold"-->
<!--            clickable-->
<!--            title="商城用户-树拍权益:"-->
<!--            :border="false"/>-->

<!--        <van-cell title="驿站(金牌商家/未开业招商中心)"-->
<!--                  :label="`￥${yiZhanShangJiaNo.rmb} + ${yiZhanShangJiaNo.price}GHB`">-->
<!--          <template #right-icon><input type="radio" v-model="checked" value="3"></template>-->
<!--        </van-cell>-->
<!--        <van-cell title="驿站(皇冠商家/已开业招商中心)"-->
<!--                  :label="`￥${yiZhanShangJiaYes.rmb} + ${yiZhanShangJiaYes.price}GHB`">-->
<!--          <template #right-icon><input type="radio" v-model="checked" value="4"></template>-->
<!--        </van-cell>-->
<!--        <van-cell title="商家(皇冠商家/已开业招商中心)" :label="`￥${ShangJiaYes.rmb} + ${ShangJiaYes.price}GHB`">-->
<!--          <template #right-icon><input type="radio" v-model="checked" value="5"></template>-->
<!--        </van-cell>-->

        <van-cell
            clickable
            title="温馨提示:"
            :border="false"/>

        <van-cell title="" :border="false">
          <template #label>
            <span style="color: red">
              (1) 打款凭证截图后，在图片上备注树拍账号;<br>
              (2) 加盟类型和打款凭证金额不匹配，原路退回;<br>
              (3) GHB 将打入平台销毁部分;
            </span>
          </template>
        </van-cell>


        <van-cell
            clickable
            title="收款账号(一)"
            :border="false"/>
        <van-cell title="账户名称" :label="bankCardInfo[0].bankName">
          <template #right-icon>
            <van-button size="mini" @click="copyText(bankCardInfo[0].bankName)">点击复制</van-button>
          </template>
        </van-cell>
        <van-cell title="账户号码" :label="bankCardInfo[0].bankNo">
          <template #right-icon>
            <van-button size="mini" @click="copyText(bankCardInfo[0].bankNo)">点击复制</van-button>
          </template>
        </van-cell>
        <van-cell title="开户银行" :label="bankCardInfo[0].bankAddress">
          <template #right-icon>
            <van-button size="mini" @click="copyText(bankCardInfo[0].bankAddress)">点击复制</van-button>
          </template>
        </van-cell>


        <div v-if="bankCardInfo.length==2" class="cardInfoView">
          <van-cell
            clickable
            title="收款账号(二)"
            :border="false"/>
          <van-cell title="账户名称" :label="bankCardInfo[1].bankName">
          <template #right-icon>
            <van-button size="mini" @click="copyText(bankCardInfo[1].bankName)">点击复制</van-button>
          </template>
        </van-cell>
        <van-cell title="账户号码" :label="bankCardInfo[1].bankNo">
          <template #right-icon>
            <van-button size="mini" @click="copyText(bankCardInfo[1].bankNo)">点击复制</van-button>
          </template>
        </van-cell>
        <van-cell title="开户银行" :label="bankCardInfo[1].bankAddress">
          <template #right-icon>
            <van-button size="mini" @click="copyText(bankCardInfo[1].bankAddress)">点击复制</van-button>
          </template>
        </van-cell>
        </div>




        <!-- new -->

        <van-cell
            clickable
            title="截图凭证"
            :border="false"/>

        <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="handleBeforeUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon">+</i>
        </el-upload>
      </van-cell-group>
      <div class="bottom-btn van-safe-area-bottom">
        <van-button
            class="bototm-btn-sub"
            round
            block
            type="primary"
            native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
    <div class="van-safe-area-bottom" style="height: 100px"></div>
  </div>
</template>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="less" scoped>
.infoSubmit {
  padding-top: 3vh;

  .bottom-btn {
    width: 100%;
    padding: 16px;
    position: fixed;
    z-index: 99;
    bottom: 20px;
  }
}

.cardInfoView{
  margin-top: 30px;
}
</style>

